<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双向数据绑定 v-model</title>
</head>
<body>
    <div id="app">
        <h1>{{ title }}</h1>
        <h3>文本框 {{ data.text }}</h3>
        <h3>单选框 {{ data.radio }}</h3>
        <h3>复选框 {{ data.checkbox }}</h3>
        <h3>记住密码 {{ data.remember }}</h3>
        <h3>下拉框 {{ data.select }}</h3>

        <div>
            <!-- 单项数据绑定，当数据发生改变时，视图会跟着更新，但用户手动更改input，数据不会跟着更新 -->

            单项数据绑定：<input type="text" :value="data.text">
        </div>
        <hr />
        <div>
            <!--
                双向数据绑定，当数据发生改变时，视图会跟着更新，当用户手动修改input，数据也会跟着更新
                对于input.text，v-model 绑定的是 value 属性
            -->
            双向数据绑定：<input type="text" v-model="data.text">
        </div>
        <hr />
        <div>
            <!-- 
                单选框
                对于input.radio，绑定的是选中状态
             -->
             <input type="radio" v-model="data.radio" value="1">写作
             <input type="radio" v-model="data.radio" value="2">画画
        </div>
        <hr />
        <div>
            <!-- 
                复选框
                对于input.checkbox，绑定的是选中状态
             -->
             <input type="checkbox" v-model="data.checkbox" value="1">写作
             <input type="checkbox" v-model="data.checkbox" value="2">画画
             <input type="checkbox" v-model="data.checkbox" value="3">运动
        </div>
        <hr />
        <div>
            <!-- 
                单个复选框
                对于input.checkbox，绑定的是选中状态
             -->
             <input type="checkbox" v-model="data.remember">记住密码
        </div>
        <hr />
        <div>
            <!-- 
                下拉框，绑定的是选中状态
             -->
             <select v-model="data.select">
                <option value="">请选择</option>
                <option value="1">写作</option>
                <option value="2">画画</option>
                <option value="3">运动</option>
             </select>
        </div>
        <br />
        <br />
        <br />
        <hr />
        <div>
            <h3>url: {{web.url}}</h3>
            <h3>user: {{web.user}}</h3>
            <!-- 
                v-model 修饰符，有很多，大多不常用
             -->
             实时渲染：<input type="text" v-model="web.url"><br/>
             失去焦点或回车键之后渲染：<input type="text" v-model.lazy="web.url"><br/>
             输入值转换为数值型：<input type="text" v-model.number="web.user" title="输入100人，web.user值为100"><br/>
             去掉首尾空格：<input type="text" v-model.trim="web.url">
        </div>
    </div>

    <script type="module">
        import {createApp, reactive} from './js/vue.esm-browser.js'
        // template 标签可以用来包装多个元素或多行代码，其标签不会在页面中渲染

        createApp({
            // setup选项，用于设置响应式数据和方法等 
            setup() {
                // reactive 创建响应式对象，用于存储复杂的数据类型，例如：对象、数组
                const data = reactive({
                    text: "www.baidu.com",
                    radio: "",
                    checkbox: [],
                    remember: false,
                    select: ""
                })

                const web = reactive({
                    url: "www.baidu.com",
                    user: 0
                })

                return {
                    title: "v-model",
                    data,
                    web
                }
            }
        }).mount("#app")
    </script>
</body>
</html>